<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>22_24(6)</title>
</head>
<body>
<input id="queue-input" type="text">
<p id="queue-cont">队列内容：apple&lt;-pear</p>    
<button id="in-btn">入队</button>
<button id="out-btn">出队</button>
<button id="font-btn">打印队头元素内容</button>
<button id="empty-btn">判断队列是否为空</button>

<script>
// 队头对应数组中第一个元素
var queue = ["apple", "pear"];
var input = document.getElementById("queue-input");
var p = document.getElementById("queue-cont");
document.getElementById("in-btn").onclick = function(){
  queue.push(input.value);
  p.textContent = "队列内容:" + queue.join("<-");
}
document.getElementById("out-btn").onclick = function(){
  queue.shift(input.value);
  p.textContent = "队列内容:" + queue.join("<-");
}
document.getElementById("font-btn").onclick = function(){
  console.log(queue[0]);
}
document.getElementById("empty-btn").onclick = function(){
  if(queue.length === 0)
    console.log("队列为空");
  else
    console.log("队列不为空");
}
</script>
</body>
</html>